Document

Static

O elemento segue o fluxo normal do documento, sem deslocamento.

1

2

3

4

Relative

O elemento é deslocado em relação à sua posição original.

CSS


.relative {
  position: relative;
  top: 100px;
  left: 100px;
}

1

2

3

4

Absolute

O elemento é removido do fluxo normal do documento, liberando o espaço ocupado. Ele é posicionado em relação ao ancestral mais próximo com position diferente de static (neste caso, a <div> do exemplo).

CSS


.container {
  position: relative;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

1

2

3

4

Fixed

O elemento sai do fluxo normal do documento, ficando fixo na janela de exibição, conforme o posicionamento definido (top, bottom, left, right).

CSS


.fixed {
  position: fixed;
  top: 10px;
}

1

2

3

4

Sticky

O elemento se comporta como relative até atingir o topo, depois fica fixo enquanto o container estiver visível.

CSS


.sticky {
  position: sticky;
  top: 10px;
}

1

2

3

4